<template>
    <el-dialog :title="`${editRows.length?'编辑':'添加'}`" :visible.sync="value" :before-close="close"  width="700px">
        <el-form label-position="left" label-width="100px" :model="formData" :rules="formRules" ref="formRef">
            <el-form-item prop="name" label="分类名称">
                <el-input placeholder="请输入分类名称" v-model="formData.name"></el-input>
            </el-form-item>
            <el-form-item prop="img" label="分类图标">
                <elUploadImage v-model="formData.img" :multiple="false"  :limit="1"></elUploadImage>
            </el-form-item>
            <el-form-item prop="sort" label="排序">
                <el-input v-model.number="formData.sort" placeholder="请输入排序 例如:1"></el-input>
            </el-form-item>
            <el-form-item prop="status" label="是否启用">
                <el-switch v-model="formData.status" :active-value="2" :inactive-value="1"></el-switch>
            </el-form-item>
        </el-form>
        <div slot="footer">
            <el-button type="primary" @click="submit">{{ editRows.length?('编辑'+(editRows.length>1?this.current+'/'+editRows.length:'')):'添加' }}</el-button>
            <el-button @click="close">关闭</el-button>
        </div>
    </el-dialog>
</template>
<script>
import elUploadImage from '@/components/el-upload-image.vue'
export default {
    data() {
        return {
            current:1,
            formData:{
                name:"",
                img:[],
                sort:"",
                status:2,
            },
            formRules:{
                name:[
                    { required:true,message:'请填写分类名称',trigger:['blur'] },
                ],
                sort:[
                    { required:true,message:'请填写排序',trigger:['blur'] }
                ],
            },
            
        }
    },
    props: {
        value: Boolean,
        editRows:{
            type:Array,
            default:()=>[]
        },
    },
    watch:{
        editRows(value){
            if(value&&value.length){
                Object.assign(this.formData,this.editRows[0])
                this.$emit('input',true)
            }
        }
    },
    components:{
        elUploadImage
    },
    methods: {
        submit(){
            this.$refs.formRef.validate(async(valid)=>{
                if(valid){
                    this.$loading()
                    // 编辑
                    let cpFormData = JSON.parse(JSON.stringify(this.formData)) // deep cp
                    cpFormData.img = cpFormData.img[0]?cpFormData.img[0].url:'' //
                    if(this.editRows && this.editRows.length){
                        await this.$post({
                            url: "/admin/formoption.FormOptionCate/edit",
                            data: cpFormData,
                            loading: true,
                            successTip: true
                        })
                        if(this.current != this.editRows.length){
                            this.current += 1
                            Object.assign(this.formData,this.editRows[this.current-1])
                            return
                        }
                    }else{
                    //提交
                        await this.$post({
                            url: "/admin/formoption.FormOptionCate/add",
                            data: cpFormData,
                            loading: true,
                            successTip: true
                        })
                    }
                    this.close()
                    this.$emit('update')
                    this.$loading().close()
                }
            })
        },
        close(){
            Object.assign(this.$data,this.$options.data())
            this.$emit('input',false)
            this.$emit('close')
            setTimeout(() => {
                this.$refs.formRef.resetFields()
            }, 0);
        }
    }
}
</script>